import React, { Component } from 'react'
import './SellOnline.less'

import { SearchBar } from 'antd-mobile'
import LevelLinkTab from 'base/LevelLinkTab/LevelLinkTab.js'
import { getMainType, getSubType, getShopCommodityList } from 'api/seller'

import { testContext } from 'context/context.js'
import { observer, inject } from 'mobx-react'

@inject('mineMsg')
@observer
// let ThemeContext = React.createContext('light')

class SellOnline extends Component {
  constructor(props) {
    super(props)
    this.state = {
      urlParams: {
        shopCode: this.props.match.params.shopCode,
        type: this.props.match.params.type
      },
      curListTitleIndex: 0,
      curContentTitleIndex: 0,
      mainTypeArr: [],
      mainId: null,
      subTypeArr: [],
      subId: null,
      commodityList: [],
      pageNo: 1
    }
  }

  getMoreCommodityList = () => {
    let pageNo = this.state.pageNo
    pageNo++
    this.setState({ pageNo: pageNo }, () => {
      this._getShopCommodityList(this.state.mainId, this.state.subId, 'normal', null)
    })
  }

  getLevelLinkTabMainId = (id, subId, index) => {
    console.log(id)
    this.setState({ mainId: id, subId: subId, curListTitleIndex: index, commodityList: [] }, () => {
      this._getSubType(this.state.mainId, this.state.subId)
    })
  }

  getLevelLinkTabSubId = (id, index) => {
    console.log(id)
    this.setState({ subId: id, curContentTitleIndex: index }, () => {
      this._getShopCommodityList(this.state.mainId, this.state.subId, 'normal', null)
    })
  }

  _search = (val) => {
    console.log(val)
    if (val) {
      this._getShopCommodityList(null, null, 'search', val.trim())
    }
  }

  _getMainType = () => {
    let opts = {
      type: this.state.urlParams.type,
      shopCode: this.state.urlParams.shopCode
    }
    getMainType(opts).then((res) => {
      if (res && res.length) {
        this.setState({ mainTypeArr: res, mainId: res[0].id }, () => {
          this._getSubType(res[0].id, res[0].subIds)
        })
      }
    })
  }

  _getSubType = (mainId, subIds) => {
    let opts = {
      type: this.props.match.params.type,
      shopCode: this.props.match.params.shopCode,
      superiorId: null,
      subIds: subIds
    }
    getSubType(opts).then((res) => {
      if (res && res.length) {
        this.setState({ subTypeArr: res, subId: res[0].id }, () => {
          this._getShopCommodityList(this.state.mainId, this.state.subId, 'normal', null)
        })
      }
    })
  }

  _getShopCommodityList = (mainId, subId, type, name) => {
    let opts
    if (type === 'normal') {
      opts = {
        shopCode: this.props.match.params.shopCode,
        salesStatus: 2,
        commodityMianId: mainId,
        commoditySubId: subId,
        pageNo: this.state.pageNo
      }
    } else if (type === 'search') {
      opts = {
        shopCode: this.props.match.params.shopCode,
        salesStatus: 2,
        name: name,
        pageNo: this.state.pageNo
      }
    }
    getShopCommodityList(opts).then((res) => {
      if (res && res.length) {
        let commodityList = this.state.commodityList
        commodityList = commodityList.concat(res)
        this.setState({ commodityList: commodityList })
      }
    })
  }

  componentDidMount() {
    this._getMainType()
    console.log(this.props.location.state)
  }

  render() {
    return (
      <div className="sell-online">
        <div className="search">
          <SearchBar placeholder="输入商品关键字搜索" maxLength={8} showCancelButton={false}
            cancelText={'确定'}
            onCancel={this._search.bind(this)}
          />
        </div>
        <testContext.Provider value={{ color: "red" }}>
          <LevelLinkTab
            urlParams={this.state.urlParams}
            mainTypeArr={this.state.mainTypeArr}
            subTypeArr={this.state.subTypeArr}
            curListTitleIndex={this.state.curListTitleIndex}
            curContentTitleIndex={this.state.curContentTitleIndex}
            commodityList={this.state.commodityList}
            sellOnline={this}
          />
        </testContext.Provider>


      </div>
    )
  }
}

export default SellOnline